<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>-->
    <!-- import Vue before Element -->
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="js/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
<div id="app">
    <template>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户账户">
                <el-input v-model="formInline.userAccount" placeholder="用户账户"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称">
                <el-input v-model="formInline.userName" placeholder="用户昵称"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="formInline.phone" placeholder="电话号码"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱">
                <el-input v-model="formInline.email" placeholder="用户邮箱"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUsers">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="userAccount"
                    label="账号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="昵称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="电话"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 15]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="usersCount">
            </el-pagination>
        </div>
    </template>
</div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                // currentPage: 1,
                // pageSize: 5,
                usersCount: '',
                formInline: {
                    userAccount: null,
                    userName: null,
                    phone: null,
                    email: null,
                    currentPage: 1,
                    pageSize: 5,
                }
            };
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 表单数据提交
            getUsers() {
                axios.post('http://localhost:7070/user/condition', this.formInline)
                    .then(response => {
                        this.tableData = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            // getAllUsers() {
            //     axios.get('http://localhost:7070/user/page/' + this.currentPage + '/' + this.pageSize)
            //         .then(response => {
            //             this.tableData = response.data.data;
            //         })
            //         .catch(error => {
            //             console.error('获取服务器数据时出错：', error);
            //         });
            // },
            getUsersCount() {
                axios.get('http://localhost:7070/user/count')
                    .then(response => {
                        this.usersCount = response.data.data;
                    })
                    .catch(error => {
                        console.error('获取服务器数据时出错：', error);
                    });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize = val;
                this.getUsers();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.currentPage = val;
                this.getUsers();
            }
        },
        created() {
            this.getUsersCount();
            this.getUsers();
        }
    })
</script>